<template>
  <VBtn
    color="primary"
    class="product-upgrade-to-pro"
    target="_blank"
    rel="noopener noreferrer"
  >
    测试

    <VMenu
      open-on-hover
      activator="parent"
      offset="15"
      max-width="400px"
      :close-on-content-click="false"
      transition="slide-y-reverse-transition"
    >
      <VCard>
        <VCardTitle>房地产项目设计流程管理系统 - 一个让人安心设计的房产公司</VCardTitle>
        <VCardText>
          这是一个站内消息的示例，你可以在这里放置一些站内消息，比如：
          aaa
          bbb
        </VCardText>
        <VCardText>下面是两个测试按钮</VCardText>
        <VCardText>
          <VBtn
            class="me-4"
            target="_blank"
            rel="noopener noreferrer"
          >
            发送
          </VBtn>
          <VBtn
            variant="outlined"
            target="_blank"
            rel="noopener noreferrer"
          >
            取消
          </VBtn>
        </VCardText>
      </VCard>
    </VMenu>
  </VBtn>
</template>

<style lang="scss" scoped>
.product-upgrade-to-pro {
  position: fixed;

  // To keep upgrade to pro button on top of v-layout
  z-index: 999;
  inset-block-end: 5%;
  inset-inline-end: 79px;

  .v-application &.v-btn.v-btn--elevated {
    box-shadow: 0 1px 20px 1px rgb(var(--v-theme-error)) !important;

    &:hover {
      box-shadow: none !important;
    }
  }
}
</style>
